<template>
  <view class="content">
    <Toast
      :show="show"
      message="加载中..."
      @onClose="show = false"
    />
    <Toast id="xh-toast" />
    <button @click="showToast">正常点击</button>
    <button @click="handleToast">函数式</button>
    <com-a @request="handleToastA" ref="comRef" />
  </view>
</template>

<script>
import Toast from "../../components/Toast/index";
import toast from "../../components/Toast/toast";
import comA from "./components/comA";
export default {
  components: {
    Toast,
    comA,
  },
  data() {
    return {
      show: false,
    };
  },
  onLoad() {},
  methods: {
    showToast() {
      this.show = true;
    },
    handleToast() {
      toast({
        show: true,
        message: "哈哈哈哈",
        duration: 1001,
        type: "loading",
        onClose: () => {
          console.log("关闭了");
        },
        onOpened: () => {
          console.log("打开了");
        },
      });
    },
    handleToastA() {
      toast({
        context: this.$refs.comRef,
        selector: "#com-a-toast",
        show: true,
        message: "哈哈哈哈",
        duration: 1001,
        type: "loading",
        onClose: () => {
          console.log("关闭了");
        },
        onOpened: () => {
          console.log("打开了");
        },
      });
    },
  },
};
</script>

<style>
.content {
  justify-content: center;
  background-color: #8f8f94;
  min-height: 100vh;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx auto;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>
